<template>
	<div :class="[prefixCls+'-result']">
		<div :class="[[prefixCls+'-result-icon'],type]">
			<Icon :type="type+'-filling'" />
		</div>
		<div :class="[prefixCls+'-result-title']" v-if="title">
			{{title}}
		</div>
		<div :class="[prefixCls+'-result-desc']" v-if="desc">
			{{desc}}
		</div>
		<div :class="[prefixCls+'-result-desc']" v-if="this.$slots.desc">
			<slot name="desc"></slot>
		</div>
		<div :class="[prefixCls+'-result-extra']" v-if="extra">
			{{extra}}
		</div>
		<div :class="[prefixCls+'-result-extra']" v-if="this.$slots.extra">
			<slot name="extra"></slot>
		</div>
		<div :class="[prefixCls+'-result-actions']" v-if="this.$slots.actions">
			<slot name="actions"></slot>
		</div>
	</div>
</template>

<script>
import { prefixCls } from '../prefix'
import './result.css'

export default {
    name: `${prefixCls}Result`,
    props:{
    	type: {
    		type: String,
    		default: 'info'
    	},
    	title: {
    		type: String
    	},
    	desc: {
    		type: String
    	},
    	extra: {
    		type: String
    	}
    },
    data(){
        return {
            prefixCls: prefixCls,
        }
    },
}
</script>